import React, { Component } from 'react';

export default class Status extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render = () => {
    const status = this.props.status
    const equiping = this.props.equiping
    const detail = this.props.detail
    const me = this

    const equipingShow = equiping.map(it => {
      const d = detail.equips.find(e => e.id == it.equip_id)
      if (d == null) {
        // Request for equip detail
        me.props.requestEquipDetail(it.equip_id)
        return <div>Equip detail is loading...</div>
      } else {
        return (<div>
          <span>name: {d.name}, hp: {d.hp}, power: {d.power}, desc: {d.desc}</span>
          <a href="#" onClick={() => {me.props.takeOffEquip(it.id)}}>Take off</a>
        </div>)
      }
    })

    return (
      <div>
        <br />
        名称: {status.name}<br />
        等级: {status.level}<br />
        力量: {status.power}<br />
        生命: {status.hp}/{status.max_hp}<br />
        经验: {status.exp}/{(status.level + 5) * 5 + 50}
        <br />

        {equipingShow}
      </div>
    )
  }
}